<template>
	<view v-if="!hava" class="nothing" style="position: relative; width: 750rpx;height: 100vh;">
		<view class="content position-center">
			{{loadingText}}
		</view>
	</view>
	<view v-if="hava" class="offline offline-index">
		<!-- 用户信息 -->
		<view class="offline-user flex-row-around" 
			  style="width: 750rpx;height: 100px;border-bottom: 2px solid #eee;"
			  v-for="item in userInfos" :key="item.id">
			<!-- 头像 -->
			<view class="offline-user-icon" style="width: 150rpx;height: 100%;padding-top: 1px;">
				<view class="offline-user-icon" style="width: 120rpx;height: 60px;
											   border-radius: 50%;border: 2px solid #aaa;
											   overflow: hidden;margin: 16px auto;">
					<image :src="item.memberImg"></image>
				</view>
			</view>
			<!-- 用户信息 -->
			<view class="offline-user-info" style="width: 380rpx;">
				<view class="offline-user-info-nickname offline-user-info-text">
					昵称: {{item.memberName}}
				</view>
				<!-- <view class="offline-user-info-nickname offline-user-info-text">
					账号: {{item.memberAccount}}
				</view> -->
			</view>
			<!-- 功能按钮 -->
			<view class="offline-user-fuction" style="width: 170rpx;">
				<view class="offline-user-fuction-edit offline-user-fuction-button" 
					  @click="showDialog(item)">
					查看
				</view>
			</view>
		</view>
	</view>
	<!-- 对话框 -->
	<uni-popup ref="popup" type="dialog">
		<view class="dialog" style="width: 600rpx;height: 200px;background-color: white;
									border-radius: 10px;box-shadow: 0 0 10px 0 #ccc;">
			<!-- 用户信息 -->
			<view class="offline-user flex-row-around" 
				  style="width: 600rpx;height: 80px;border-bottom: 2px solid #eee;">
				<!-- 头像 -->
				<view class="offline-user-icon" style="width: 120rpx;height: 100%;padding-top: 1px;">
					<view class="offline-user-icon" style="width: 100rpx;height: 50px;
												   border-radius: 50%;border: 2px solid #aaa;
												   overflow: hidden;margin: 15px auto;">
						<image :src="checkUser.memberImg"></image>
					</view>
				</view>
				<!-- 用户信息 -->
				<view class="offline-user-info" style="width: 420rpx;">
					<view class="offline-user-info-nickname offline-user-info-text">
						昵称: {{checkUser.memberName}}
					</view>
					<!-- <view class="offline-user-info-nickname offline-user-info-text">
						账号: {{checkUser.memberAccount}}
					</view> -->
				</view>
			</view>
			<view class="in-info flex-column-around" style="width: 600rpx;height: 120px;">
				<view class="in-data in-info-text">
					入会时间: 2022.04.16
				</view>
				<view class="in-type in-info-text">
					会员地址: {{checkUser.address?checkUser.address:'无地址'}}
				</view>
				<!-- <view class="in-recommend in-info-text">
					入会推荐人: 张三
				</view> -->
			</view>
		</view>
	</uni-popup>

</template>

<script>
	import { BASE_URL, BASE_IMAGE_URL, GET_USER_INFO } from '/utils/CommonValues.js'
	
	import request from '../../../utils/request.js';
	export default {
		data() {
			return {
				loadingText: '加载中...',
				hava: false, // 是否有下级会员
				checkUser: {},
				userInfos: [],
				userInfo: {},
			}
		},
		onLoad() {
			GET_USER_INFO().then(res => {
				this.userInfo = res;
				this.getList();
			})
		},
		methods: {
			// 获取下级会员的信息
			getList() {
				request.GET('/system/members/list', {
					parentAccount: this.userInfo.advMembersId
				}).then(response => {
					this.userInfos = response.rows;
					if(this.userInfos.length != 0) {
						this.hava = true;
					} else {
						this.hava = false;
						this.loadingText = '无下级会员';
					}
				})
			},
			// 显示弹窗
			showDialog(info) {
				this.checkUser = info;
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，
				// type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center');
			}
		}
	}
</script>

<style lang="less">
.offline-user-info-text {
	margin: 10px 0;
	font-weight: bold;
}
.offline-user-fuction-button {
	width: 150rpx;
	height: 35px;
	border-radius: 7px;
	margin: 10px 0;
	text-align: center;
	line-height: 35px;
	border: 1px solid #ccc;
	&:active {
		background-color: #eee;
	}
}
.in-info-text {
	box-sizing: border-box;
	width: 100%;
	text-align: start;
	padding-left: 20px;
}
</style>
